var video = document.querySelector("video");
var progressBox = document.querySelector(".progress-box");
var progress = document.querySelector(".progress");
var progressTimer = null; // 进度 timer

// 计算时长，注意：这里的 padStart 是 es7 语法
function parseTime(value) {
  if (!value) return "";
  let interval = Math.floor(value);
  let minute = Math.floor(interval / 60)
    .toString()
    .padStart(2, "0");
  let second = (interval % 60).toString().padStart(2, "0");
  return `${minute}:${second}`;
}
// 推进进度条
function changeProgress() {
  var timeStr = parseTime(video.currentTime) + "/" + parseTime(video.duration);
  document.querySelector(".ctrl-box .progress-time").innerText = timeStr;
  var percent = video.currentTime / video.duration;
  progress.style.width = percent * 100 + "%";
}
// 点击进度条的任意地方
progressBox.onclick = function (e) {
  clearInterval(progressTimer);
  var length = e.pageX - progressBox.offsetLeft;
  var percent = length / progressBox.offsetWidth;
  video.currentTime = percent * video.duration;
  video.play();
  progressTimer = setInterval(changeProgress, 60);
  // 显示视频在播放的样式
  // ...
};
// 播放&暂停点击
document.querySelector(".play-btn").onclick = function () {
  if (video.paused) {
    // 播放后，需要推进进度条
    video.play();
    progressTimer = setInterval(changeProgress, 60);
  } else {
    // 暂停后，需要停止推进进度条
    video.pause();
    clearInterval(progressTimer);
  }
};


/// 音乐

let currentMusic = 0;

const music = document.querySelector('#audio-source');

const seekBar = document.querySelector('.music-seek-bar');
const songName = document.querySelector('.current-song-name');
const artistName = document.querySelector('.artist-name');
const coverImage = document.querySelector('.cover');
const currentMusicTime = document.querySelector('.current-time');
const musicDuration = document.querySelector('.duration');

const queue = [...document.querySelectorAll('.queue')];

// 在此处选择所有按钮

const forwardBtn = document.querySelector('i.fa-forward');
const backwardBtn = document.querySelector('i.fa-backward');
const playBtn = document.querySelector('i.fa-play');
const pauseBtn = document.querySelector('i.fa-pause');
const repeatBtn = document.querySelector('span.fa-redo');
const volumeBtn = document.querySelector('span.fa-volume-up');
const volumeSlider = document.querySelector('.volume-slider');
// 音乐设置功能

const setMusic = (i) => {
  seekBar.value = 0;
  let song = songs[i];
  currentMusic = i;

  music.src = song.path;

  songName.innerHTML = song.name;
  artistName.innerHTML = song.artist;
  coverImage.src = song.cover;

  setTimeout(() => {
      seekBar.max = music.duration;
      musicDuration.innerHTML = formatTime(music.duration);
  }, 300);
  currentMusicTime.innerHTML = '00 : 00';
  queue.forEach(item => item.classList.remove('active'));
  queue[currentMusic].classList.add('active');
}

setMusic(0);
// 格式持续时间为 00 : 00 格式

const formatTime = (time) => {
  let min = Math.floor(time / 60);
  if(min < 10){
      min = `0` + min;
  }

  let sec = Math.floor(time % 60);
  if(sec < 10){
      sec = `0` + sec;
  }

  return `${min} : ${sec}`;
}
//  向前按钮

forwardBtn.addEventListener('click', () => {
  if(currentMusic >= songs.length - 1){
      currentMusic = 0;
  } else{
      currentMusic++;
  }
  setMusic(currentMusic);
  playBtn.click();
})

// 后退按钮

backwardBtn.addEventListener('click', () => {
  if(currentMusic <= 0){
      currentMusic = songs.length - 1;
  } else{
      currentMusic--;
  }
  setMusic(currentMusic);
  playBtn.click();
})